<template>
    <el-backtop :right="100" :bottom="100" />
    <el-form v-loading="loading">
        <div class="container">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3303251_efnidbhsho.css"/>
        <div class="wrapperBox" v-for="(item,index) in imgs" :key="index">
            <a class="Image"><img :src="item" alt=""></a>
            <div class="title">
               <i class="iconfont icon-FLAG"></i>Pink Venom
            </div>
            <div class="interact">
                <div class="look">725人浏览</div>
                <div class="star">
                    <span><i class="iconfont icon-dianzan"></i> 8</span>
                    <span><i class="iconfont icon-xiaoxi"></i> 0</span>
                    <span><i class="iconfont icon-star-fill"></i> 16</span>
                </div>
            </div>
            <div class="self">
                <div class="nick">
                    <i class="iconfont icon-morentouxiang" style="height:120px width:120px"></i>
                <span>西门吹雪</span>
                </div>
                <div>
                    <span>08-26</span>
                </div>
            </div>
        </div>
    </div>

    </el-form>
</template>

<script setup lang="ts">
    import axios from 'axios';
    import { onMounted,ref } from 'vue';
    const imgs=ref([])
    const loading = ref(true)
    //获取请求方法
    const getData=()=>{
        axios({
        method:'GET',
        url:'https://www.dance365.com/apis/moment/moments/rec/default?access_token=c494ae44-3adc-48ca-8749-5128a53358d7&column=recommend&pageSize=40&pageNum=0&localCache=0'
    }).then(res=>{
        loading.value=false
        const {content}=res.data
        const cover=content.map(item=>{
            return item.cover;
        });

        cover.forEach(ele => {
            ele.forEach((item)=>{
                imgs.value.push(item)
            })
        });

    }).catch((reason)=>{
        console.log(reason);



    })
}
onMounted(()=>{
    getData();
})


</script>

<style lang="less" scoped>

.container{
    //height:1700px;
    flex-wrap: wrap;
    display:flex;
    flex:1;
    .wrapperBox{
        flex-direction:column;
        display: flex;
        margin:5px;
        height:260px;
        width:224px;

        border-radius: 5px;
        .Image{
            opacity:1;
            :hover{
                opacity: 0.5;
            }
            img{
            height: 125px;
            width:224px;
            border-radius:5px;

        }
        }
        .title{
            padding: 10px;
        }
        .interact{
            padding-left:15px;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
            .star{
                display: flex;
                justify-content: space-between;
                width:120px;

            }
        }
        .self{
            padding-top: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .nick{
                display: flex;
                align-items: center;
                span{
                    margin-left: 5px;
                }
            }
        }
    }
}

</style>
